<template>
    <div class="chat-container">
      <div class="header">
        <button class="back-button">
          <el-icon><ArrowLeft /></el-icon>
        </button>
        <h2>一元二次方程的求解</h2>
        <span class="span">共{{ messages.length }}条对话，模式：gpt3</span>
      </div>
      <div class="chat-list">
        <div
          v-for="(msg, index) in messages"
          :key="index"
          class="chat-message"
          :class="{ user: msg.isUser, bot: !msg.isUser }"
        >
          <img v-if="!msg.isUser" src="@/assets/logo2.png" alt="Bot Avatar" class="avatar" />
          <div class="message">{{ msg.text }}</div>
          <img v-if="msg.isUser" src="@/assets/logo2.png" alt="User Avatar" class="avatar" />
        </div>
      </div>
      <div class="footer">
        <div class="tags">
          <span>知识点：</span>
          <button class="knowledge-button">鸡兔同笼问题</button>
          <button class="knowledge-button">鸡兔同笼问题</button>
        </div>
        <div class="input-area">
          <input v-model="userInput" @keyup.enter="sendMessage" placeholder="发消息..." />
          <button class="send-button" @click="sendMessage">
            <el-icon><Promotion /></el-icon>
          </button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ElIcon } from 'element-plus'; 
  import { Send } from '@element-plus/icons-vue'; 
  export default {
    name: 'ChatApp',
    components: {
      ElIcon,
      Send, 
    },
    data() {
      return {
        userInput: '',
        messages: [],
      };
    },
    methods: {
      sendMessage() {
        if (this.userInput.trim() === '') return;
  
        this.messages.push({ text: this.userInput, isUser: true });
  
        setTimeout(() => {
          const botReply = this.generateBotReply(this.userInput);
          this.messages.push({ text: botReply, isUser: false });
          this.$nextTick(() => {
            const chatList = this.$el.querySelector('.chat-list');
            chatList.scrollTop = chatList.scrollHeight;
          });
        }, 500);
        this.userInput = '';
      },
      generateBotReply(userInput) {
        return `666: "${userInput}"`;
      },
    },
  };
  </script>
  
  <style scoped>
  .chat-container {
    width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .header {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
  }

  .back-button {
    background-color: white;
    border: none;
    cursor: pointer;
  }

  span {
    margin-left: 5%;
    font-size: 14px;
    color: #ccc;
  }
  
  .back-button .el-icon {
    font-size: 20px; 
}


  .chat-message {
    margin: 10px 0;
    display: flex;
    align-items: center;
  }
  
  .user {
    justify-content: flex-end;
  }
  
  .bot {
    justify-content: flex-start;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 50%;
  }
  
  .message {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 10px;
  }
  
  .footer {
    padding: 10px;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
  }
  
  .tags {
    margin: 12px 0;
    color: #ccc;
    font-size: 14px;
    text-align: left;
  }
  
  .knowledge-button {
    background-color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #57A5F2;
  }
  
  .input-area {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 5px;
  }
  
  input {
    flex-grow: 1;
    padding: 10px;
    border: none;
    outline: none;
  }
  
  .send-button {
    background-color: white;
    border: none;
    cursor: pointer;
    margin-left: 10px;
  }
  </style>
  